<template>
<div>
  <div id="app" v-cloak>
    <div class="header_con">
    </div>
    <headers></headers>
    <div class="main_con clearfix">
      <div class="left_menu_con clearfix">
        <h3>用户中心</h3>
        <ul>
          <li><a href="/#/userinfo">· 个人信息</a></li>
          <li><a href="user_center_order.html">· 全部订单</a></li>
          <li><a href="user_center_site.html" class="active">· 收货地址</a></li>
          <li><a href="/#/user_center_pass">· 修改密码</a></li>
        </ul>
      </div>
      <div class="right_content clearfix">
        <div class="site_top_con">
          <a href="javascript:" @click="is_show=true">新增收货地址</a>
          <span>你已创建了<b>{{count}}</b>个收货地址，最多可创建<b>20</b>个</span>
        </div>
        <div class="site_con" v-for="i in address_list">
          <div class="site_title">
            <h3>{{ i.linkman }} {{i.provice.name}}</h3>

            <em v-if="i.is_default">默认地址</em>
            <a href="javascript:" class="edit_icon"  @click="is_default(i.id)" v-else></a>
            <span class="del_site" @click="del_address(i.id)">×</span>
          </div>
          <ul class="site_list">
            <li><span>收货人：</span><b>{{ i.linkman }}</b></li>
            <li><span>所在地区：</span><b>{{i.provice.name}}{{i.city.name}}{{i.area.name}}</b></li>
            <li><span>地址：</span><b>{{i.address}}</b></li>
            <li><span>手机：</span><b>{{i.mobile}}</b></li>
            <li><span>固定电话：</span><b>{{i.tel}}</b></li>
            <li><span>电子邮箱：</span><b>{{i.email}}</b></li>
          </ul>
          <div class="down_btn">
            <a href="javascript:"  class="edit_icon"  @click="update_address(i.id)">编辑</a>
          </div>
          <div class="pop_con" v-show="upd_show">
            <div class="site_con site_pop" >
              <div class="site_pop_title">
                <h3>修改收货地址</h3>
                <a href="javascript:"  @click="upd_show=false">×</a>
              </div>
              <form>
                <div class="form_group">
                  <label>收货人：</label>
                  <input type="text" name="receiver" class="receiver" v-model="form.linkman" @blur="is_error">
                </div>
                <div class="form_group">
                  <label>所在地区：</label>
                  <select  v-model="form.provice" @change="get_city">
                    <option :value="i.id" v-for="i in provice">{{i.name}}</option>
                  </select>
                  <select v-model="form.city" @change="get_area">
                    <option :value="i.id" v-for="i in city">{{i.name}}</option>

                  </select>
                  <select v-model="form.area">
                    <option :value="i.id" v-for="i in area">{{i.name}}</option>

                  </select>
                </div>
                <div class="form_group">
                  <label>详细地址：</label>
                  <input type="text" name="place" class="place" v-model="form.address" @blur="is_error">
                </div>
                <div class="form_group">
                  <label>手机：</label>
                  <input type="text" name="mobile" class="mobile" v-model="form.mobile" @blur="is_mobile">
                </div>
                <div class="form_group">
                  <label>固定电话：</label>
                  <input type="text" name="tel" class="tel" v-model="form.tel" @blur="is_error">
                </div>
                <div class="form_group">
                  <label>邮箱：</label>
                  <input type="text" name="email" class="email" v-model="form.email" @blur="is_email">
                </div>
                <input type="button" name="" value="修 改" class="info_submit" @click="update_add">
                <input type="reset" name="" value="取 消" class="info_submit info_reset" @click="upd_show=false">
              </form>
            </div>
            <div class="mask"></div>
          </div>
        </div>


      </div>
    </div>
    <p align="center">
      <button v-for="i in page_range" @click="get_address(i)" v-if="num==i" style="color: red">{{i}}</button>
      <button  @click="get_address(i)" v-else>{{i}}</button>

    </p>


    <div class="pop_con" v-show="is_show">
      <div class="site_con site_pop" >
        <div class="site_pop_title">
          <h3>新增收货地址</h3>
          <a href="javascript:" @click="is_show=false">×</a>
        </div>
        <form>
          <div class="form_group">
            <label>收货人：</label>
            <input type="text" name="receiver" class="receiver" v-model="form.linkman" @blur="is_error">
            <span class="receiver_error">{{error.name}}</span>
          </div>
          <div class="form_group">
            <label>所在地区：</label>
            <select  v-model="form.provice" @change="get_city">
              <option :value="i.id" v-for="i in provice">{{i.name}}</option>
            </select>
            <select v-model="form.city" @change="get_area">
              <option :value="i.id" v-for="i in city">{{i.name}}</option>

            </select>
            <select v-model="form.area">
              <option :value="i.id" v-for="i in area">{{i.name}}</option>

            </select>
          </div>
          <div class="form_group">
            <label>详细地址：</label>
            <input type="text" name="place" class="place" v-model="form.address" @blur="is_error">
            <span class="place_error">{{error.address}}</span>
          </div>
          <div class="form_group">
            <label>手机：</label>
            <input type="text" name="mobile" class="mobile" v-model="form.mobile" @blur="is_mobile">
            <span class="mobile_error">{{ error.mobile }}</span>
          </div>
          <div class="form_group">
            <label>固定电话：</label>
            <input type="text" name="tel" class="tel" v-model="form.tel" @blur="is_error">
            <span class="tel_error">{{error.tel}}</span>
          </div>
          <div class="form_group">
            <label>邮箱：</label>
            <input type="text" name="email" class="email" v-model="form.email" @blur="is_email">
            <span class="email_error">{{ error.email }}</span>
          </div>
          <input type="button" name="" value="新 增" class="info_submit" @click="add_address">
          <input type="reset" name="" value="取 消" class="info_submit info_reset" @click="is_show=false">
        </form>
      </div>
      <div class="mask"></div>
    </div>

    <div v-show="del_show">
      <div class="confirm_pop">
        <div class="confirm_pop_title">
          <h3>确认删除</h3>
          <a href="javascript:" @click="del_show=false">×</a>
        </div>
        <p>您确认删除当前地址吗？</p>
        <input type="button" value="确 定" class="confirm_submit" @click="del_is_show" />
        <input type="button" value="取 消" class="confirm_submit confirm_cancel" @click="del_show=false" />
      </div>
      <div class="mask"></div>
    </div>
  </div>
  <footers></footers>
</div>
</template>

<script>

import headers from "./headers";
import footers from "./footers";
export default {
  name: "useraddress",
  data(){
    return{
      error:{name:'',address:'',mobile:'',tel:'',email:""},
      username:localStorage.getItem('username'),
      usermobile:localStorage.getItem('usermobile'),
      userid:localStorage.getItem('userid'),
      is_show:false,
      form:{user:localStorage.getItem('userid'),is_default:false}, // 添加收货地址
      provice:[],
      city:[],
      area:[],
      address_list:"",  // 接收用户的所有收货地址
      count:"",
      page_range:'' , // 分页展示收货地址
      num:"", // 按钮变红
      upd_show:false ,// 修改地址
      g_id:"",
      del_show:false,
      del_id:""
    }
  },
  methods:{
    get_provice(){  // 获取省
      this.$axios.get('area/')
      .then(res=>{console.log(res)
      this.provice=res.data.data
      })
    },
    get_city(){  // 获取市
      this.$axios.get('area/?pid='+this.form.provice)
      .then(res=>{console.log(res)
      this.city = res.data.data
      })
    },
    get_area(){  // 获取区
      this.$axios.get('area/?pid='+this.form.city)
        .then(res=>{console.log(res)
          this.area = res.data.data
        })
    },
    add_address(){ // 添加收货地址
      this.$axios.post('address/',this.form)
      .then(res=>{console.log(res)
      if(res.data.code==200){
        alert(res.data.meg)
        this.form={user:localStorage.getItem('userid'),is_default:false}
        this.is_show=false
        this.get_address(1)
      }
      })

    },
    is_error(){
      if(this.form.linkman ==undefined){
        this.error.name='请填写收货人'
      }else {
        this.error.name=''
      }
      if(this.form.address==undefined){
        this.error.address='请填写收货地址'
      }else {this.error.address=''}
      if(this.form.tel==undefined){this.error.tel='请填写固定电话'}
      else {this.error.tel=''}
    },
    is_mobile(){ // 验证手机号
      let reg = /^1[3-9]\d{9}$/
      if(!reg.test(this.form.mobile)){
       this.error.mobile='手机号输入错误'
      }else {
        this.error.mobile=''
      }
    },
    is_email(){ // 验证邮箱
      let reg= /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if(!reg.test(this.form.email)){
        this.error.email='邮箱输入错误'
      }else {this.error.email=''}
    },
    get_address(pid){  // 获取用户收货地址
      this.$axios.get('address/?id='+this.userid+'&p_id='+pid)
      .then(res=>{console.log(res)
      this.address_list=res.data.data
        this.count=res.data.count
        this.page_range = res.data.page_range
        this.num = pid
      })
    },
    del_address(id){
      this.del_id=id
      this.del_show=true
    },
    del_is_show(){
      this.$axios.delete('address/?id='+this.del_id)
        .then(res=>{console.log(res)
          alert(res.data.meg)
          this.del_show=false
          this.get_address(1)
        })
    },
    is_default(id){ // 默认地址
      this.$axios.put('address/?is_id='+id+'&userid='+this.userid)
      .then(res=>{console.log(res)
      alert(res.data.meg)
        this.get_address(1)
      })
    },
    update_address(id){ // 获取要修改的地址
      this.$axios.get('address/?x_id='+id)
      .then(res=>{console.log(res)
      this.form=res.data
        this.get_city()
        this.get_area()
        this.upd_show=true
        this.g_id=id
      })
    },
    update_add(){
      this.$axios.put('address/?x_id='+this.g_id,this.form)
      .then(res=>{console.log(res)
        alert(res.data.meg)
        this.upd_show=false
        this.get_address(1)
      })

    }

  },
  mounted() {
    this.get_provice()
    this.get_address(1)
    this.is_error()
    },
  components:{
    'headers':headers,
    'footers':footers
  }
}
</script>

<style scoped>

</style>
